<script setup>
	// 视口高度
	const { windowHeight } = uni.getSystemInfoSync()
	const scrollPageProps = defineProps({
		borderStyle: {
			type: [String, Boolean],
			default: false,
		},
		refresherEnabled: { type: Boolean, default: false },
		refresherTriggered: {
			type: Boolean,
			default: false,
		},
		backgroundColor: {
			type: String,
		},
	})
	defineEmits(['refresherrefresh', 'scrolltolower'])
</script>

<template>
		<scroll-view
			scroll-y
			:style="{
				height: windowHeight + 'px',
				borderBottom: scrollPageProps.borderStyle,
				boxSizing: 'border-box', // 边框计算在内
				backgroundColor: scrollPageProps.backgroundColor,
			}"
			:refresherEnabled="scrollPageProps.refresherEnabled"
			:refresherTriggered="scrollPageProps.refresherTriggered"
			@refresherrefresh="$emit('refresherrefresh')"
			@scrolltolower="$emit('scrolltolower')"
		>
			<view class="scroll-page-content">
				<slot></slot>
			</view>
		</scroll-view>
</template>

<style lang="scss" scoped>
	.scroll-page-content {
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
